<!-- 选择楼层 -->
<template>
  <div class="selectFloor-container">
    <div class="main" v-if="props.FloorArr.length !== 0">
        <div
          class="box"
          v-for="item in props.FloorArr"
          :key="item.id"
          @click="transmit(item)"
        >
          <Box :colorArr="['#7817e7', '#ba3ae2']">
            <div class="content">
              <div class="icon">
                <Icon type="floor"></Icon>
              </div>
              <p class="title">{{ item.floorNumber }}</p>
              <p class="people">以住人数: {{ item.floorResided }}人</p>
              <p class="people">可住人数: {{ item.floorCapacity }}人</p>
              <p class="people">
                保洁员:
                {{ item.Cleaning ? item.Cleaning.cleaningName : "暂无" }}
              </p>
            </div>
          </Box>
        </div>
      </div>
  </div>
</template>

<script setup>
import Box from "@/components/Box/index.vue";
import Icon from "@/components/Icon/index.vue";
const props = defineProps({
  FloorArr:{
    type:Array,
    default:[]
  }
})

import {useCheckInStore} from "@/store/useCheckInStore.js"
const emit = defineEmits(['closeMasking'])
const store = useCheckInStore()
const {setFloor} = store
// 选中楼层信息
function transmit(item){
  if(item.floorResided >= item.floorCapacity){
    ElMessage.error('该楼层已满，请换个楼层居住')
    return
  }
  setFloor(item)
  emit("closeMasking")
}
</script>

<style lang="less" scoped>
@import './styles/Select.less';
.selectFloor-container{
  width: 100%;
  height: 100%;
  .select();
}
</style>